<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE HTML>
<html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highchart</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
	    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
	    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
	    <link rel="stylesheet" href="/resources/demos/style.css">
	    <script src="../js/jquery.popupWindow.js"></script>
	    <script src="../js/highcharts.js"></script>
		<script src="../js/exporting.js"></script>
		
	<!-- 하이차트 3 -->
	<script type="text/javascript">
	$(function () {
			
		$.ajax({
	        url : "admin_Chart_Basicarea.do",
	        dataType : "json",
	        success : function(data) {
	        	
	        	$.each(data.age_20,function(index,items){
	        		var x;
	        		x= items.age
	 	        	x = Number(x);

	    $('#container3').highcharts({
	        chart: {
	            type: 'bar'
	        		},
	        title: {
	            text: '입사지원 나이 현황'
	        		},
	        xAxis: {
	            categories: ['10대', '20대', '30대', '40대'],
	            title: {
	                text: null
	           			}
	        		},
	        yAxis: {
	            min: 0,
	            title: {
	                text: '명수',
	                align: 'high'
	            		},
	            labels: {
	                overflow: 'justify'
	            		}
	        		},
	        tooltip: {
	            valueSuffix: ' 명'
					 },
	        plotOptions: {
	            bar: {
	                dataLabels: {
	                    enabled: true
							}
						}
					},
	        legend: {
	            layout: 'vertical',
	            align: 'right',
	            verticalAlign: 'top',
	            x: -40,
	            y: 100,
	            floating: true,
	            borderWidth: 1,
	            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
	            shadow: true
	        		},
	        credits: {
	            enabled: false
	        		 },
	        series: [{
	            name: '인원',
	            data: [7, x, 10, 3]
	        		}]
							});
						});
					},

    error : function(request, status, error) {
       console.log("code:" + request.status + "\n"
             + "message:" + request.responseText
             + "\n" + "error:" + error);
							}
						});
					});
	
	</script>

	</head>
	<body>
	    <p><div id="container3" style="width: 440px; max-width: 800px; height: 380px; margin: 0"></div></p>
	</body>
</html>